<template>
<div class="homeCategoryList">
    <div class="newproduct" v-for="item in categoryList" :key="item.id">
        <div class="home_title">{{item.name}}</div>
        <ul class="product_list">
            <li v-for="item2 in item.goodsList" :key="item2.id" @click="goDetails(item2.id)">
                <img :src="item2.list_pic_url" style="display:block;" width="100%" alt="">
                <div class="van-ellipsis">{{item2.name}}</div>
                <div class="price">{{item2.retail_price | RMBfilter}}</div>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    name: "HomeCategoryList",
    props: ["categoryList"],
    data() {
        return {

        }
    },
    methods: {
        goDetails(id) {
            this.$router.push("/details/" + id);
        }
    }
}
</script>

<style lang="less" scoped>
.newproduct {
    padding-top: 10px;
    margin-bottom: 10px;
    background-color: #fff;

    .home_title {
        font-size: 20px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }

    .product_list {
        padding: .1rem 2%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
            width: 49%;
            margin-bottom: .1rem;
            background-color: #fff;
            text-align: center;
            line-height: .3rem;

            .price {
                color: darkred;
            }
        }
    }
}
</style>
